<template>
  <div class="transQuery_main">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="起始SN设备号" v-model="query.startSncode" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="结束SN设备号" v-model="query.endSncode" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="终端型号" v-model="query.modelCode" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">
          <a-form-item>
            <a-select placeholder="当前状态" :options="SettleStatusList" v-model="query.status"></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-select placeholder="终端类型" :options="seloptions" v-model="query.type"></a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 20px;">
        <a-col :span="9" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="6">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch"
              >查询</a-button>
            </a-col>
            <a-col :span="6">
              <a-button class="button_sty" type="primary" @click="reset">重置</a-button>
            </a-col>
            <a-col :span="6">
              <a-button
                class="button_sty"
                type="primary"
                :loading="downLoading"
                @click="download"
              >导出</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>
    <a-row :gutter="16">
      <a-col :span="4">入库总量：{{Tcount}}</a-col>
      <a-col :span="4">未绑定量：{{Tunused}}</a-col>
      <a-col :span="4">绑定数量：{{Tused}}</a-col>
    </a-row>
    <a-table
      style="margin-top:10px"
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.transOrderNo"
    >
      <span slot="type" slot-scope="record">
        <span v-if="record.type == 'minipos'">电签pos</span>
        <span v-if="record.type == 'mpos'">mpos</span>
        <span v-if="record.type == 'epos'">智能pos</span>
        <span v-if="record.type == 'pos'">传统pos</span>
      </span>
      <span slot="action" slot-scope="record">
        <span @click="goDetail(record.id)" style="color:#1890ff;">详细</span>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "序号", dataIndex: "id", width: "10%", align: "center" },
  { title: "SN设备号", dataIndex: "sncode", width: "10%", align: "center" },
  {
    title: "合作机构号",
    dataIndex: "agentCode",
    width: "10%",
    align: "center"
  },
  {
    title: "终端类型",
    scopedSlots: { customRender: "type" },
    width: "10%",
    align: "center"
  },
  {
    title: "终端品牌",
    dataIndex: "factoryName",
    width: "10%",
    align: "center"
  },
  { title: "终端型号", dataIndex: "modelName", width: "10%", align: "center" },
  { title: "入库时间", dataIndex: "ctime", width: "16%", align: "center" },
  { title: "当前状态", dataIndex: "statusName", width: "10%", align: "center" },
  { title: "活动名称", dataIndex: "subjectName", width: "10%", align: "center" },
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      momentDate: moment(new Date()),
      excelurl: "",
      statusList: [],
      SettleStatusList: [
        { value: null, label: "当前状态" },
        { value: "used", label: "已绑定" },
        { value: "unused", label: "未绑定" }
      ],
      seloptions: [
        { label: "终端类型", value: null },
        { label: "mpos", value: "mpos" },
        { label: "电签pos", value: "minipos" },
        { label: "智能pos", value: "epos" },
        { label: "传统pos", value: "pos" }
      ],
      query: {
        startSncode: null,
        endSncode: null,
        status: null,
        type: null,
        modelCode: null,
        current: 1,
        pageSize: 6
      },
      pagination: { current: 1, total: 1, pageSize: 10 },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      Tused: 0,
      Tcount: 0,
      Tunused: 0,
      login: false,
      list: [],
      count: null,
      payedCount: null,
      totalAmount: null,
      loading: false,
      downLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 }
        }
      }
    };
  },
  watch: {},
  filters: {
    timeFilter: function(value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.handleSearch();
  },
  methods: {
    moment,
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.current = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },
    onChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.query.data.transDate = dateStrings;
      console.info(this.query.data.transDate);
    },
    getTerminalSum() {
      this.$axios.get("/agent/agent/terminal/getSum").then(res => {
        if (res.data.code == "OK") {
          console.log(res.data);
          this.Tcount = res.data.data.data.count;
          this.Tunused = res.data.data.data.unused;
          this.Tused = res.data.data.data.used;
        } else {
          this.Tcount = 0;
          this.Tunused = 0;
          this.Tused = 0;
        }
      });
    },
    reset() {
      this.query = {
        startSncode: null,
        endSncode: null,
        status: null,
        type: null,
        modelCode: null,
        current: 1,
        pageSize: 6
      };
    },
    handleSearch() {
      this.loading = true;
      console.info(this.query);
      this.getTerminalSum();
      this.$axios.post("/agent/agent/terminal/queryList", this.query).then(
        res => {
          console.info(res);
          this.loading = false;
          if (res.data.code == "OK") {
            this.list = res.data.list;
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
          } else {
            this.list = [];
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        },
        err => {
          this.loading = false;
        }
      );
    },
    download() {
      let fetchExport = {
        startSncode: this.query.startSncode,
        endSncode: this.query.endSncode,
        status: this.query.status,
        type: this.query.type,
        modelCode: this.query.modelCode
      };
      this.downLoading = true;
      this.$axios
        .post("/agent/agent/terminal/fetchExportQueryApi", fetchExport)
        .then(res => {
          const a = document.createElement("a");
          a.download = name; //下载历史记录查询的文件名
          let token = localStorage.getItem("token");
          let downloadUrl =
            `/agent/agent/terminal/excelListDownloadApi?Authorization=` + token;
          a.href = downloadUrl;
          // console.log(downloadUrl)
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          this.downLoading = false;
        });
    },
    goDetail(id) {
      console.log(id);
      // this.$router.push(`/org/transmanage/${id}/transquerydetail`)
      this.$router.push(`/Terminal/terminalAuditQueryDetail/${id}`);
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
  // width: 140px;
}
</style>